<template>
  <Drawer
    v-model:visible="insideShow"
    :width="props.width"
    :closable="true"
    destroyOnClose
    :zIndex="20"
    :header-style="{ background: 'rgba(250, 250, 250, .95)', padding: '12px 16px', }"
    :footer-style="{ background: 'rgba(250, 250, 250, .95)', textAlign: 'center',  }"
    :style="{ position: 'absolute' }"
    :get-container="drawerContainer"
    @close="onClose"
  >
    <template #title>
      {{insideTitle}}
      <!-- <slot name="newTab"></slot> -->
      <span title="在tab中打开它" @click="handleTab">
        <Icon icon="carbon:table-shortcut" :size="20" style="float: right;padding-right:6px;"/>
      </span>
    </template>
    <slot></slot>
    <template #footer>
      <slot name="footer"></slot>
      <a-button style="margin-right: 18px" @click="onClose">取消</a-button>
      <a-button type="primary" @click.prevent="onSubmit">提交</a-button>
    </template>
  </Drawer>
</template>
<script lang="ts" name="PageWrapDrawer" setup>
import { Drawer, } from 'ant-design-vue';
import { computed, ref, watch, } from 'vue';
import { Icon, } from '/@/components/Icon/index';

const handleTab = () => {
    emit('tab')
}
const emit = defineEmits(['success', 'on-drawer-close', 'tab'])
const props = defineProps({
    show: Boolean,
    isSee: Boolean,
    isUpdate: Boolean,
    title: {type: String, default: ''},
    titleSuffix: {type: String, default: ''},
    width: {type: String, default: 'clamp(400px, 100%, 55vw)'},
})
const insideTitle = computed(() => {
  let result = (props.isUpdate ? '编辑' : '创建') + ' ' + props.titleSuffix;
  if (props.title) result = props.title;
  if (props.isSee) result = props.titleSuffix + ' 详情'
  return result;
})

const insideShow = ref(false)
watch(() => props.show, async (v1, _) => {
  insideShow.value = v1
})

const onSubmit = () => {
  emit('success')
}

const drawerContainer = ():any => {
  // let containers = document.getElementsByClassName('vben-layout-content full')
  let containers = document.getElementsByClassName('vben-page-wrapper')
  if (containers.length > 0) {
    return containers[0]
  } else {
    let body = document.getElementsByTagName('body')
    return body[0]
  }
}

const onClose = () => {
  emit('on-drawer-close');
};

</script>
